<template>
	<view class="content">
		<!-- banner轮播 -->
		<!-- <swiper indicator-dots autoplay class="swiper">
		  <swiper-item v-for="(item, index) in cimages" :key="index">
			<image :src="url+item[0]"></image>
		  </swiper-item>
		</swiper> -->
		<view class="shopImg">
			<img src="../../static/img/shop.jpg" alt="" />
		</view>
		<view class="shoplist" v-if="shopList.length>0">
			<ul>
				<li v-for='(item,index) in shopList' :key='index' @click="bindShopDetails(item.id)">
					<image :src="imgUrl+item.image" mode=""></image>
				</li>
			</ul>
		</view>
		<view v-if="shopList.length==0">
			<nullVue></nullVue>
		</view>
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
	import { shopList } from '@/api/shop.js'
	import config from '@/config'
	import nullVue from '@/components/null';
	export default {
		components:{
			nullVue
		},
		data() {
			return {
				imgUrl:config.baseUrl,
				shopList:[],
			}
		},
		onLoad() {
		    this.shoplist();
		},
		methods: {
			// 查询商品列表数据
			shoplist() {
				let data = {
					  num :'50',
					}
				shopList(data).then((res) => {
					if(res.code==200){
						this.shopList = res.data
						// const str = [];
						// this.shopList = res.data
						// for (let i = 0; i < this.shopList.length; i++) {
						// 	this.shopList[i].price = this.shopList[i].price.replace(/\.00$/, '');
						// 	this.cimages[i] = res.data[i].images.split(",")
						// }
					}
				  })
			},
			
			// 跳转商城详情
			bindShopDetails(id) {
				uni.navigateTo({
					url: '/pages/shop/shopList?id='+id,
				  });
			},
		}
	}
</script>

<style>
	
	.content{
		background-color: #fff;
	}
	
	.shoplist{
		padding: 5px;
	}
	
	.shoplist ul li{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin: 10rpx 27rpx;
		float: left;
		box-shadow: 1px 1px 10rpx #ddd;
	}
	
	.shoplist ul li image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.spinfo{
		padding: 5px 10px;
	}
	
	.spinfo h3{
		font-weight: 300;
		font-size: 24rpx;
	}
	
	.inventory{
		font-size: 20rpx;
		color: #c7c7c7;
		font-weight: 300;
	}
	
	.price{
		text-align: right;
		font-size: 15px;
		color: #6a8473;
		float: right;
	}
	
	.swiper{
		height: 350rpx;
	}
	
	.swiper image{
		width: 100%;
	}
	
	.shopImg{
		width: 100%;
		height: 1280rpx;
	}
	
	.shopImg image{
		width: 100%;
		height: 100%;
	}
</style>
